<template>
	<view class="mine">
		<headerBar title="我的" isShowSearch></headerBar>
		
		<navigator class="mine-info" :url=" 0 ? '/pages/login/login':'/pages/login/login'">
			<image src="../../../static/img/avatar.jpg"></image>
			<view v-if="0">登录/注册</view>
			<view v-else>
				<text class="name">OK3497</text>
				<text class="tips">编辑个人资料</text>
			</view>
		</navigator>
		
		<!-- 未登录 -->
		<view class="not-logon-bound" v-if="0">
			<view class="h3">登录/注册</view>
			<view class="text">欢迎回来，登录到AWE</view>
			<view class="btn">
				<navigator url="/pages/login/login"><button type="primary" size="mini">立即登录</button></navigator>
				<navigator url="/pages/login/registerFirstSteps"><button size="mini">注册</button></navigator>
			</view>
		</view>
		<!-- 未绑定钱包 -->
		<view class="not-logon-bound" v-if="0">
			<view class="h3">绑定您的交易账户</view>
			<view class="text">绑定后您可以跟随优秀的交易员，也可以选择交易员入驻，当有人跟随您奖获得奖励</view>
			<navigator class="a" url="/pages/authorization/identity">立即绑定</navigator>
		</view>
		
		<!-- 钱包 -->
		<view class="wallet" v-if="1">
			<view class="wallet-item">
				<navigator class="header" url="/pages/wallet/detail">
					<text class="wallet-header-h">我的钱包</text>
					<uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
				</navigator>
				<navigator class="body" url="/pages/wallet/detail">
					<view class="wallet-body-item">
						<view class="wallet-body-h">我的钱包</view>
						<view class="wallet-item-money">0.0000 <text>USDT</text></view>
					</view>
					<view class="wallet-body-item">
						<view class="wallet-body-h">保险钱包</view>
						<view class="wallet-item-money">0.0000 <text>USDT</text></view>
					</view>
				</navigator>
				<view class="footer">
					<navigator url="/pages/wallet/recharge">充值</navigator>
					<navigator url="/pages/wallet/withdrawDeposit">提现</navigator>
					<!-- <navigator url="/pages/wallet/identity">兑换</navigator> -->
				</view>
			</view>
		</view>
		
		<!-- 导航 -->
		<uni-grid class="box" :column="4" :showBorder="false" :highlight="false">
		    <uni-grid-item class="grid-item">
				<navigator url="/pages/achievement/achievement">
					<image src="../../../static/img/yeji_icon.png" mode=""></image>
					<text class="text">我的业绩</text>
				</navigator>
		    </uni-grid-item>
		    <uni-grid-item class="grid-item">
				<navigator url="/pages/team/team">
					<image src="../../../static/img/tuandui_icon.png" mode=""></image>
					<text class="text">我的团队</text>
				</navigator>
		    </uni-grid-item>
		    <uni-grid-item class="grid-item">
				<navigator url="/pages/security/security">
					<image src="../../../static/img/anquan_icon.png" mode=""></image>
					<text class="text">安全中心</text>
				</navigator>
		    </uni-grid-item>
			<uni-grid-item class="grid-item">
				<navigator url="/pages/team/invite">
					<image src="../../../static/img/yaoqing_icon.png" mode=""></image>
					<text class="text">邀请好友</text>
				</navigator>
			</uni-grid-item>
		</uni-grid>
		
		<!-- <image class="advertising" src="../../../static/img/mine.jpg"></image> -->
	</view>
</template>

<script>
	import headerBar from '../../../components/header-bar';
	export default {
		components: {
			headerBar
		},
		data() {
			return {
				title: 'Hello',
				walletList: []
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.mine .navigator-hover {
		background-color: transparent;
		opacity: 1;
	}
	.mine-info {
		display: flex;
		align-items: center;
		height: 150rpx;
		padding: 0rpx 30rpx;
		margin-bottom: 30rpx;
	}
	.mine-info image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.mine-info text {
		display: block;
	}
	.mine-info .name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.mine-info .tips {
		position: relative;
		font-size: 24rpx;
		color: #558EF1;
		padding: 10rpx 20rpx;
		border-radius: 26rpx;
		background-color: #fff;
	}
	.mine-info .tips::after{
		position: absolute;
		top: -2rpx; 
		bottom: -2rpx;
		left: -2rpx;
		right: -2rpx;
		background: linear-gradient(-88deg, #02C7EA,#A657F8);
		content: '';
		z-index: -1;
		border-radius: 100rpx;
	}
	.mine .box {
		padding: 0rpx 30rpx;
	}
	.mine >>> .uni-grid {
		border-radius: 10rpx;
		box-shadow: 0 0px 10px rgb(0 0 0 / 10%), 0 0px 0px rgb(0 0 0 / 10%);
	}
	.mine .grid-item {
		text-align: center;
		align-items: center;
	}
	.mine .grid-item image {
		display: block;
		width: 62rpx;
		height: 62rpx;
		margin: 0rpx auto 20rpx;
	}
	.mine .wallet {
		padding: 0rpx 30rpx;
		font-size: 30rpx;
		color: #fff;
	}
	.mine .wallet-item {
		padding: 40rpx 30rpx 30rpx;
		border-radius: 30rpx;
		background: linear-gradient(150deg, #02C7EA 0%, #A657F8 100%);
		margin-bottom: 50rpx;
		box-shadow: 0 0px 10px rgb(0 0 0 / 20%), 0 0px 0px rgb(0 0 0 / 20%); 
	}
	.mine .wallet-item .header,
	.mine .wallet-item .body,
	.mine .wallet-item .footer {
		display: flex;
		justify-content: space-between;
	}
	.mine .wallet-item .header,
	.mine .wallet-item .body {
		margin-bottom: 40rpx;
	}
	.mine .wallet-body-item {
		flex: 1;
	}
	.mine .wallet-header-h {
		font-size: 32rpx;
		font-weight: bold;
	}
	.mine .wallet-body-h {
		font-size: 22rpx;
	}
	.mine .wallet-item-money {
		font-weight: bold;
	}
	.mine .wallet-item-money text {
		font-size: 24rpx;
		font-weight: 100;
		margin-left: 10rpx;
	}
	.mine .wallet-item .footer navigator {
		flex: 1;
		font-size: 26rpx;
		line-height: 60rpx;
		text-align: center;
		border: 2rpx solid #fff;
		border-radius: 30rpx;
		margin-right: 25rpx;
	}
	.mine .wallet-item .footer navigator:last-child {
		background: linear-gradient(90deg, #3BE899 0%, #21ADE7 100%);
		color: #fff;
		margin-right: 0rpx;
		border-color: transparent;
	}
	.mine .not-logon-bound {
		padding: 30rpx 80rpx;
		text-align: center;
	}
	.mine .not-logon-bound .h3 {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 25rpx;
	}
	.mine .not-logon-bound .text {
		font-size: 24rpx;
		color: #808080;
		margin-bottom: 25rpx;
	}
	.mine .not-logon-bound .a {
		font-size: 30rpx;
		color: #1296DB;
	}
	.mine .not-logon-bound .navigator-hover {
		background-color: transparent;
		opacity: 1;
	}
	.mine .not-logon-bound .btn {
		display: flex;
	}
	.mine .not-logon-bound .btn navigator {
		height: 60rpx;
		flex: 1;
		border-radius: 10rpx;
	}
	.mine .not-logon-bound .btn button {
		width: 100%;
		line-height: 60rpx;
		border: none;
	}
	.mine .not-logon-bound .btn navigator:first-child {
		margin-right: 20rpx;
	}
	.mine .not-logon-bound .btn button::after {
		display: none;
	}
	.advertising {
		width: 100%;
		max-height: 240rpx;
		margin-top: 110rpx;
	}
</style>
